postcss-selector-matches

What is postcss-selector-matches?

The postcss-selector-matches package is a PostCSS plugin that transforms :matches() pseudo-class into a more compatible CSS selector. This allows developers to use the :matches() pseudo-class in their CSS, which can simplify complex selectors and improve readability.

What are postcss-selector-matches's main functionalities?

Transform :matches() pseudo-class

This feature transforms the :matches() pseudo-class into a more compatible CSS selector. For example, the input CSS 'a:matches(.foo, .bar) { color: red; }' will be transformed into 'a.foo, a.bar { color: red; }'. This makes the CSS more compatible with browsers that do not support the :matches() pseudo-class.

const postcss = require('postcss');
const selectorMatches = require('postcss-selector-matches');

const css = 'a:matches(.foo, .bar) { color: red; }';

postcss([selectorMatches])
  .process(css)
  .then(result => {
    console.log(result.css);
  });

Other packages similar to postcss-selector-matches

postcss-nesting

The postcss-nesting package allows you to nest your CSS selectors in a way that follows the CSS Nesting Module Level 3 specification. It is similar to postcss-selector-matches in that it helps to simplify and organize complex CSS selectors, but it focuses on nesting rather than the :matches() pseudo-class.

postcss-custom-selectors

The postcss-custom-selectors package allows you to define custom selectors in your CSS. This can be used to create reusable selector patterns, similar to how :matches() can simplify complex selectors. However, it provides a different approach by allowing you to define and use custom selectors.

README

postcss-selector-matches

PostCSS plugin to transform :matches() W3C CSS pseudo class to more compatible CSS selectors

http://dev.w3.org/csswg/selectors-4/#matches

Installation

$ npm install postcss-selector-matches

Usage

var postcss = require("postcss")

var output = postcss()
  .use(require("postcss-selector-matches"))
  .process(require("fs").readFileSync("input.css", "utf8"))
  .css

Using this input.css:

p:matches(:first-child, .special) {
  color: red;
}

you will get:

p:first-child, p.special {
  color: red;
}

Note that if you are doing crazy selector like p:matches(a) {} you are likely to get crazy results (like pa {}).

Options

lineBreak

(default: false)

Allows you to introduce a line break between generated selectors.

---

Changelog

License